<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lzy">
    <title>lzy-</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
        }
        header{
            width: 780px;
            height: 30px;
            margin: 10px auto;
            border-radius: 5px;
            color: white;
            position: relative;
            background-image: linear-gradient(to bottom,rgb(77,124,172) 55%,rgb(34,93,152));
        }
        ul{
            margin: 0;
            padding: 0;
            cursor: pointer;
        }
        li{
            height: 22px;
            line-height: 22px;
            margin: 0;
            padding: 0;
            margin-top: 4px;
            margin-left: 5px;
            width: 90px;
            list-style: none;
            float: left;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
        }
        span{
            display: inline-block;
            height: 18px;
            background-color: white;
            width: 1px;
            position: absolute;
            top: 6px;
            opacity: 0.5;
        }
        .s1{
            left: 96px;
        }
        .s2{
            left: 192px;
        }
        .s3{
            left: 288px;
        }
        .s4{
            left: 384px;
        }
        .s5{
            left: 480px;
        }
        .s6{
            left: 576px;
        }
        .s7{
            left: 672px;
        }
        .uu{
            width: 480px;
            border: 1px solid #4B81B6;
            position: absolute;
            border-radius: 5px;
            display: none;
            top: 40px;
            background-image: linear-gradient(to bottom,rgb(255,255,255) 55%,rgb(34,93,152)); 
        }
        .uu li{
            color: #4B81B6;
            text-align: center;
            line-height: 22px;
            margin-bottom: 4px;
            border-right: 1px solid #4B81B6;
        }
        #no{
            border: 0px;
        }
        .u3{
            left: 100px;
        }
        .u4{
            left: 180px;
        }
        .u5{
            left: 250px;
        }
        .u6{
            left: 340px;
        }
        .u7{
            left: 430px;
        }
        .u8{
            left: 510px;
        }
        .u9{
            left: 620px;
        }
        .u10{
            left: 700px;
        }
    </style>
</head>
<body>
    <header>
        <ul class="u1">
            <li>站长之家</li>
            <span class="s1"></span>
            <li>行业资讯</li>
            <span class="s2"></span>
            <li>站长在线</li>
            <span class="s3"></span>
            <li>网络运营</li>
            <span class="s4"></span>
            <li>设计在线</li>
            <span class="s5"></span>
            <li>网络编程</li>
            <span class="s6"></span>
            <li>联盟资讯</li>
            <span class="s7"></span>
            <li>服务器</li>
        </ul>
        <ul class="u2 uu">
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li id="no">业界动态</li>
        </ul>
        <ul class="u3 uu">
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li id="no">业界动态</li>
        </ul>
        <ul class="u4 uu">
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li id="no uu">业界动态</li>
        </ul>
        <ul class="u5 uu">
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li id="no">业界动态</li>
        </ul>
        <ul class="u6 uu">
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li id="no">业界动态</li>
        </ul>
           <ul class="u7 uu">
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li id="no">业界动态</li>
        </ul>
        <ul class="u8 uu">
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li id="no uu">业界动态</li>
        </ul>
        <ul class="u9 uu">
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li id="no">业界动态</li>
        </ul>
        <ul class="u10 uu">
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li>业界动态</li>
            <li id="no">业界动态</li>
        </ul>
    </header>
</body>
</html>
<script>
    var lis= document.querySelectorAll('.u1 li');
    // var uls=document.querySelectorAll('ul');
    var ulss =document.querySelectorAll('.uu');
    var liss =document.querySelectorAll('.uu li');
    console.dir(lis);
    for(var i=0;i<lis.length;i++){
        lis[i].index=i;
        lis[i].onmouseover=function(){
             for(var i=0;i<ulss.length;i++){
                ulss[i].style.display='none';
            }
            lis[this.index].style.backgroundColor='blue';
            ulss[this.index].style.display='block';
            console.log(this.index);
            ulss[this.index].onmouseover=function(){
                for(var i=0;i<liss.length;i++){
                    liss[i].index=i;
                    liss[i].onmouseover=function(){
                        liss[this.index].style.backgroundColor='blue';
                    }
                    liss[i].onmouseout=function(){
                        // console.log(this.index);
                        liss[this.index].style.backgroundColor='transparent';
                    }
                }
            }
            ulss[this.index].onclick=function(){
               name=this.className.slice(1,2);
               ulss[name-2].style.display='none';
            }
        }
        lis[i].onmouseout=function(){
            lis[this.index].style.backgroundColor='transparent';
        }
    }
</script>